<template>
	<view class="container">
		<view class="order-info-container">
			<view class="top-customer-card">
			<!-- 	<view class="list-item" v-if="!orderInfo.virtualOrder">
					<text class="list-item-title">提货方式</text>
					<picker class="list-item-content" @change="bindDeliveryChange" range-key="Name" :value="deliveryName" :range="deliveryList">
						<view>{{ deliveryName }}</view>
					</picker>
					<image class="list-item-arrow" src="../../../static/images/right@3x.png"></image>
				</view> -->
				<view class="list-item" v-if="!orderInfo.virtualOrder && orderInfo.deliveryMode == 20">
					<text class="list-item-title">收货地址</text>
					<picker class="list-item-content" @change="bindAddressPickerChange" :value="addressName" range-key="addressName" :range="addressList">
						<view>{{ addressName }}</view>
					</picker>
					<image class="list-item-arrow" src="../../../static/images/right@3x.png"></image>
				</view>
				<view class="list-item">
					<text class="list-item-title">收货人</text>
					<input class="list-item-content" v-model="orderInfo.receiver" placeholder="请输入收货人" maxlength="20" />
				</view>
				<view class="list-item">
					<text class="list-item-title">手机号</text>
					<input class="list-item-content" v-model="orderInfo.phone" placeholder="请输入手机号" maxlength="11" />
				</view>
				<view class="list-item" v-if="orderInfo.deliveryMode == 10">
					<text class="list-item-title">自提地址</text>
					<picker class="list-item-content" @change="bindPickerChange" :value="storeName" range-key="Name" :range="storeList">
						<view>{{ storeName }}</view>
					</picker>
					<image class="list-item-arrow" src="../../../static/images/right@3x.png"></image>
				</view>
			</view>
			<view class="second-product-card">
				<view class="list-item product-item" v-for="(item, index) in orderItem" :key="index">
					<view class="list-item-middle"><view class="list-item-middle-img" :style="{ backgroundImage: 'url( ' + item.imgUrl + ' )' }"></view></view>
					<view class="list-item-right">
						<view class="list-item-right-title">{{ item.goodsName }}</view>
						<view class="list-item-right-bottom">
							<view class="price-container">
								<text class="unit">￥</text>
								<text class="price">{{ item.price }}</text>
							</view>
							<view class="add-car">共{{ item.amount }}件</view>
						</view>
					</view>
				</view>
			</view>
			<view class="top-customer-card">
				<view class="list-item">
					<text class="list-item-title">商品总额</text>
					<text class="list-item-content money">¥ {{ orderFee | moneyFormat(2) }}</text>
				</view>
				<view class="list-item" v-if="orderInfo.deliveryMode == 20">
					<text class="list-item-title">运费金额</text>
					<text class="list-item-content money">¥ {{ orderfreight | moneyFormat(2) }}</text>
				</view>
			</view>
			<view class="fourth-remark-card">
				<view class="card-title">订单备注</view>
				<view class="card-remark-area"><textarea class="text-area" v-model="orderInfo.remark" placeholder="请填写备注"></textarea></view>
			</view>
		</view>

		<view class="bottom-view">
			<view class="bottom-right">
				<text style="font-size: 32rpx;margin-right: 10rpx;">待支付</text>
				<text style="color: #FE7904; font-size:40rpx;">
					<text style="font-size: 24rpx; margin-right: 6rpx;">¥</text>
					{{ totalFee | moneyFormat(2) }}
				</text>
			</view>
			<view class="bottom-operation-container">
				<button class="confirm-btn-submit bottom-change-view" @click="$noMultipleClicks(submit_order)" :loading="submitUploadStatus" :disabled="submitUploadStatus">
					提交订单
				</button>
			</view>
		</view>
	</view>
</template>

<script>
import { isLogin, toLogin, successToShow, errorToShow } from '@/config/common.js';
import { getPostageStoreList, addressList } from '@/constant/customer.js';
import { getdefaultAddress, submitOrder } from '@/constant/cart.js';
import { getStoreFreight } from '@/constant/mall.js';
export default {
	components: {},
	data() {
		return {
			deliveryIndex: 0,
			deliveryName: '',
			deliveryList: [
				{
					Id: 10,
					Name: '到店自提'
				},
				{
					Id: 20,
					Name: '普通快递'
				}
			],
			shopIndex: -1,
			storeName: '请选择门店',
			storeList: [],
			addIndex: -1,
			addressName: '请选择收货地址',
			addressList: [],
			selectAddressList: [],
			orderItem: [],
			orderFee: 0.0,
			orderfreight: 0.0,
			defaultFreight: 0.0,
			totalFee: 0.0,
			defaulAddress: '',
			orderInfo: {
				customerId: uni.getStorageSync('customerId'),
				orderItems: [],
				deliveryMode: 20,
				receiver: '',
				address: '',
				phone: '',
				storeId: '',
				remark: '',
				virtualOrder: false
			},
			query_filter: {
				customerId: uni.getStorageSync('customerId'),
				pageIndex: 0,
				pageSize: 20
			},
			submitUploadStatus: false
		};
	},
	onShow() {
		this.getdefaultAdd();
	},
	onLoad: function(option) {
		if (option.orderInfo) {
			let that = this;
			this.orderInfo.orderItems = [];
			this.orderItem = JSON.parse(decodeURIComponent(option.orderInfo));
			
			if (this.orderItem.length > 0) {
				this.orderInfo.virtualOrder = this.orderItem.filter(item => item.isVirtual).length > 0;
				this.orderItem.forEach(function(element) {
					that.orderFee += element.price * element.amount;
					that.orderInfo.orderItems.push({ ProductId: element.goodsId, Count: element.amount, Img: element.img });
				});
				if (that.orderInfo.virtualOrder == 0) {
					that.totalFee = that.orderFee;
				} else {
					that.totalFee = that.orderFee + that.orderfreight;
				}
			}
			this.getStoreList();
			this.getFreight();
			//this.getdefaultAdd();
			this.deliveryName = this.deliveryList[this.deliveryIndex].Name;
			this.orderInfo.receiver = uni.getStorageSync('customer_username');
			this.orderInfo.phone = uni.getStorageSync('customer_phone');
		}
	},
	methods: {
		async getStoreList() {
			//获取自提点门店
			let result = await getPostageStoreList();
			this.storeList = result;
		},
		async getFreight() {
			let result = await getStoreFreight();
			this.orderfreight = result;
			this.defaultFreight = result;
		},
		async getdefaultAdd() {
			this.addressList = [];
			let result = await addressList(this.query_filter);
			console.log(result,'----')
			this.selectAddressList = result.rows;
			let that = this;
			this.selectAddressList.forEach(function(item) {
				
				that.addressList.push({
					id: item.id,
					addressName: item.provinceName + item.cityName + item.districtName + item.detailInfo
				});
			});
			console.log(that.addressList,'addressList')
		},
		bindDeliveryChange(e) {
			this.deliveryIndex = e.target.value;
			this.deliveryName = this.deliveryList[this.deliveryIndex].Name;
			this.orderInfo.deliveryMode = this.deliveryList[this.deliveryIndex].Id;
			if (this.deliveryIndex == 0) {
				this.totalFee = this.orderFee;
				this.orderfreight = 0;
				this.orderInfo.receiver = uni.getStorageSync('customer_username');
				this.orderInfo.phone = uni.getStorageSync('customer_phone');
				if (!this.orderInfo.receiver || !this.orderInfo.phone) {
					errorToShow('请完善个人信息', res => {
						uni.navigateTo({
							url: '../../mine/myaddress/index'
						});
					});
				}
			} else {
				if (this.selectAddressList.length == 0) {
					errorToShow('请添加收货地址', res => {
						uni.navigateTo({
							url: '../../mine/myaddress/index'
						});
					});
					return;
				}
				this.orderInfo.receiver = '';
				this.orderInfo.phone = '';
				this.orderInfo.address = '';
				this.addressName = '请选择收货地址';
				this.orderInfo.storeId = '';
				this.storeName = '请选择门店';
				this.orderfreight = this.defaultFreight;
				this.totalFee = Number(this.orderFee) + Number(this.orderfreight);
			}
		},
		bindPickerChange(e) {
			this.shopIndex = e.target.value;
			this.storeName = this.storeList[this.shopIndex].title;
			this.orderInfo.StoreId = this.storeList[this.shopIndex].id;
			this.orderInfo.Address = this.storeList[this.shopIndex].address;
		},
		bindAddressPickerChange(e) {
			this.addIndex = e.target.value;
			this.addressName = this.addressList[this.addIndex].addressName;
			let selectItem = this.selectAddressList[this.addIndex];
			this.orderInfo.receiver = selectItem.userName;
			this.orderInfo.phone = selectItem.telNumber;
			this.orderInfo.address = this.addressName;
		},
		async submit_order() {
			//虚拟商品，提货方式不能时快递
			if (this.orderInfo.deliveryMode == 20) {
				if (this.orderInfo.virtualOrder) {
					errorToShow('虚拟订单不能选择快递');
					return;
				}
				if (!this.orderInfo.address) {
					errorToShow('收货地址不能为空');
					return;
				}
			} else {
				if (!this.orderInfo.storeId) {
					errorToShow('请选择自提门店');
					return;
				}
			}
			if (!this.orderInfo.receiver) {
				errorToShow('收货人不能为空');
				return;
			}
			if (!this.orderInfo.phone) {
				errorToShow('收货人电话不能为空');
				return;
			}
			let cartIds=this.orderItem.map(item=>item.id)
			let params={
			"cartIds":cartIds.join(','),
			"storeId":0,
			// "tableNumber":"DESKTOP-2KOB1IQ",
			"deliveryType":1,
			"addressId":this.addressList[this.addIndex].id,
			}
			try {
				this.submitUploadStatus = true;
				let result = await submitOrder(params);
				if(result.code==0){
					successToShow('订单提交成功', res => {
						uni.reLaunch({
							url: '../../payorder/index?orderNo=' + result.data.orderNo+'&orderAmount='+result.data.totalPrice
						});
					});
				}else{
					errorToShow(result.msg);
				}
				
			} finally {
				const _that = this;
				setTimeout(function() {
					_that.submitUploadStatus = false;
				}, 1000);
			}
		}
	}
};
</script>

<style scoped lang="scss">
.container {
	overflow-y: auto;
	background-color: $main-page-color;
}

.order-info-container {
	padding-right: 30rpx;
	padding-left: 30rpx;
	padding-bottom: 140rpx;
	.top-customer-card {
		margin-bottom: 20rpx;
		margin-top: 20rpx;
		border-radius: 20rpx;
		background-color: #ffffff;
	}
	.second-product-card {
		margin-bottom: 20rpx;
		border-radius: 20rpx;
		background-color: #ffffff;
		padding: 20rpx 20rpx;
	}

	.fourth-remark-card {
		padding: 20rpx 20rpx;
		background-color: #ffffff;
		border-radius: 20rpx;
	}
}

.card-title {
	color: $main-text-color-gray-33;
	font-size: $main-text-size-32;
	margin-bottom: 20rpx;
}

.card-remark-area {
	width: 100%;
}

.product-item {
	padding: 20rpx 0;
}

.list-item {
	min-height: 96rpx;
	border-bottom: 2rpx solid $main-line-color-gray-F5;
	display: flex;
	align-items: center;
	color: $main-text-color-gray-33;
	&-title {
		margin-left: 20rpx;
		margin-right: auto;
		width: 140rpx;
	}

	&-content {
		margin-right: 20rpx;
		text-align: right;
	}

	&-arrow {
		width: 10rpx;
		height: 19rpx;
		margin-right: 20rpx;
	}

	.list-item-middle {
		display: flex;
		align-items: center;
		justify-content: center;
		margin-right: 30rpx;
		&-img {
			width: 160rpx;
			height: 160rpx;
			border-radius: 16rpx;
			background-repeat: no-repeat;
			background-position: center;
			background-size: cover;
		}
	}

	.list-item-right {
		width: calc(100% - 230rpx);
		color: $main-text-color-gray-33;
		font-family: 'SourceHanSansCN-Medium';
		height: 160rpx;
		display: flex;
		flex-direction: column;
		justify-content: space-between;
		&-title {
			font-size: $main-text-size-32;
		}
		&-bottom {
			width: 100%;
			display: flex;
			justify-content: space-between;
			.price-container {
				color: $main-text-color-main-orange;
				margin-right: 40rpx;
				.unit {
					font-size: $main-text-size-24;
				}
				.price {
					font-size: $main-text-size-32;
				}
			}

			.add-car {
				display: flex;
				align-items: center;
				font-family: 'SourceHanSansCN-Regular';
				color: $main-text-color-gray-33;
				font-size: $main-text-size-28;
			}
		}
	}
}

.head-img {
	width: 100rpx;
	height: 100rpx;
	border-radius: 20rpx;
	margin: 20rpx;
}

.money {
	color: $main-text-color-main-orange;
	font-size: 32rpx;
	font-weight: bold;
}

.text-area {
	border: 2rpx dashed $main-line-color-gray-DE;
	height: 180rpx;
	width: calc(100% - 20rpx);
	font-size: $main-text-size-28;
	padding: 10rpx;
}

.bottom-view {
	z-index: 999;
	height: 100rpx;
	width: 100%;
	background-color: #fff;
	color: $main-text-color-gray-33;
	display: flex;
	align-items: center;
	position: fixed;
	bottom: 0;
	justify-content: space-between;
	padding-bottom: 20rpx;
	.bottom-right {
		margin-left: 30rpx;
		color: $main-text-color-gray-33;
	}

	.bottom-operation-container {
		display: flex;
		margin-right: 30rpx;
		align-items: center;
		.confirm-btn-submit {
			padding: 0 50rpx;
			color: #ffffff;
			border-radius: 38rpx;
			font-size: $main-text-size-32;
			border-radius: 100rpx;
		}
	}
}

.top-customer-card .list-item :last-child {
	border: unset;
}
.second-product-card .list-item:last-child {
	border: unset;
}
</style>
